<template>
  <el-container>
    <el-header>
      <Menu></Menu>
    </el-header>
    <el-container>
      <el-aside>
        <el-card>
          <div
            slot="header"
            class="clearfix"
          >
            <span>热点资讯</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
            >操作按钮</el-button>
          </div>
          <div
            v-for="o in 4"
            :key="o"
            class="text item"
          >
            {{'列表内容 ' + o }}
          </div>
        </el-card>
        <el-card>
          <div
            slot="header"
            class="clearfix"
          >
            <span>竞赛资讯</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
            >操作按钮</el-button>
          </div>
          <div
            v-for="o in 4"
            :key="o"
            class="text item"
          >
            {{'列表内容 ' + o }}
          </div>
        </el-card>
      </el-aside>
      <el-main>
        <div>
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              数学
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu
              slot="dropdown"
              class="dropdownmenu"
            >
              <el-dropdown-item command="a">黄金糕</el-dropdown-item>
              <el-dropdown-item command="b">狮子头</el-dropdown-item>
              <el-dropdown-item command="c">螺蛳粉</el-dropdown-item>
              <el-dropdown-item
                command="d"
                disabled
              >双皮奶</el-dropdown-item>
              <el-dropdown-item
                command="e"
                divided
              >蚵仔煎</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              英语
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu
              slot="dropdown"
              class="dropdownmenu"
            >
              <el-dropdown-item command="a">黄金糕</el-dropdown-item>
              <el-dropdown-item command="b">狮子头</el-dropdown-item>
              <el-dropdown-item command="c">螺蛳粉</el-dropdown-item>
              <el-dropdown-item
                command="d"
                disabled
              >双皮奶</el-dropdown-item>
              <el-dropdown-item
                command="e"
                divided
              >蚵仔煎</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              物理
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu
              slot="dropdown"
              class="dropdownmenu"
            >
              <el-dropdown-item command="a">黄金糕</el-dropdown-item>
              <el-dropdown-item command="b">狮子头</el-dropdown-item>
              <el-dropdown-item command="c">螺蛳粉</el-dropdown-item>
              <el-dropdown-item
                command="d"
                disabled
              >双皮奶</el-dropdown-item>
              <el-dropdown-item
                command="e"
                divided
              >蚵仔煎</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              化学
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu
              slot="dropdown"
              class="dropdownmenu"
            >
              <el-dropdown-item command="a">黄金糕</el-dropdown-item>
              <el-dropdown-item command="b">狮子头</el-dropdown-item>
              <el-dropdown-item command="c">螺蛳粉</el-dropdown-item>
              <el-dropdown-item
                command="d"
                disabled
              >双皮奶</el-dropdown-item>
              <el-dropdown-item
                command="e"
                divided
              >蚵仔煎</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              经管
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu
              slot="dropdown"
              class="dropdownmenu"
            >
              <el-dropdown-item command="a">黄金糕</el-dropdown-item>
              <el-dropdown-item command="b">狮子头</el-dropdown-item>
              <el-dropdown-item command="c">螺蛳粉</el-dropdown-item>
              <el-dropdown-item
                command="d"
                disabled
              >双皮奶</el-dropdown-item>
              <el-dropdown-item
                command="e"
                divided
              >蚵仔煎</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <!-- 分割线 -->
          <el-divider></el-divider>
        </div>

        <el-carousel height="150px">
          <el-carousel-item
            v-for="item in 4"
            :key="item"
          >
            <h3 class="small">{{ item }}</h3>
          </el-carousel-item>
        </el-carousel>

      </el-main>
      <el-aside></el-aside>
    </el-container>
  </el-container>
</template>

<script>
import Menu from '../components/Menu.vue'

export default {
  name: 'Home',
  components: {
    Menu
  }
  // handleCommand(command) {
  //   this.$message("click on item " + command);
  // }
}
</script >

<style lang = "less" scoped>
.el-header {
  position: fixed;
  padding: 0;
}
.el-main {
  padding-top: 70px;
}
.el-aside {
  width: 300px;
  background-color: #409eff;
  .el-card {
    margin: auto;
    margin-top: 10px;
    width: 90%;
    .item {
      margin-bottom: 18px;
      font-size: 14px;
    }
    .clearfix {
      display: flex;
      justify-content: space-between;
      content: "";
      clear: both;
      margin: 0px;
    }
  }
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0px;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.el-dropdown {
  margin-right: 30px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>
